<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h } from "vue";
import ProFrom from "@/components/ProFrom";
import ProTable from "@/components/ProTable";
import { message, Modal } from "ant-design-vue";
import { queryFormMap, editFormMap } from "./form";
import { columns } from "./table";
import { getTableData1 } from "@/api/modules/table";
import { setBaseApi, get, post, del } from "@/api/http";

const queryForm = reactive({});
const querying = ref<boolean>(false);
const queryFormRef = ref<InstanceType<typeof ProFrom>>();

const listData = ref<any[]>([{}]);

const page = reactive({
  limit: 10,
  page: 1,
  total: 0,
});

onMounted(() => handleQuery());

const handleQuery = () => {
  queryFormRef.value
    ?.verify()
    .then(async (query: any) => {
      // console.log(query);
      const params = { ...page, ...query };

      get("/stationInfo/page", params, "", querying).then(
        ({ list, totalCount }) => {
          // console.log(list);
          listData.value = list;
          page.total = totalCount;
        }
      );
    })
    .catch((err: any) => {});
};

const editFormRef = ref<InstanceType<typeof ProFrom>>();
const editModel = reactive({
  open: false,
  editAble: true,
  title: "编辑",
  row: {} as any,
});

const onEdit = () => {
  if (editModel.title == "详情") return (editModel.open = false);
  editFormRef.value?.verify().then((data: any) => {
    const id = editModel.row?.id;
    post("/stationInfo/saveOrUpdate", { ...data, id }, "提交").then(() => {
      handleQuery();
      editModel.open = false;
    });
  });
};

const handleEdit = (row?: any) => {
  editModel.open = true;
  editModel.editAble = true;
  editModel.title = row ? "编辑" : "新增";
  editModel.row = row ?? {};
};
const handleDetail = (row: any) => {
  editModel.open = true;
  editModel.editAble = false;
  editModel.title = "详情";
  editModel.row = row;
};

const handleDelete = () => {
  message.success("删除成功！");
};
const tableRef = ref<InstanceType<typeof ProTable>>();
const selected = computed(() => tableRef.value?.selectedRowKeys);
const handleDeleteAll = () => {
  console.log(selected.value);
};
</script>

<template>
  <section class="page">
    <header class="">
      <ProFrom
        layout="inline"
        ref="queryFormRef"
        :mapping="queryFormMap"
        :model-value="queryForm"
        :defaultCol="6"
        @submit="handleQuery()"
        :edit-able="true"
      >
        <ProButton
          @click="queryFormRef?.reset()"
          text="重置"
          icon="redoOutlined"
          class="mr-15px"
        />
        <ProButton
          @click="handleQuery"
          type="primary"
          text="查询"
          :loading="querying"
          icon="SearchOutlined"
        />
      </ProFrom>
    </header>
    <main>
      <nav>
        <ProButton
          @click="() => handleEdit()"
          type="primary"
          text="新增"
          icon="plusOutlined"
        />

        <ProButton @click="handleQuery" text="刷新" icon="redoOutlined" />

        <ProButton
          @click="handleDeleteAll"
          type="danger"
          text="删除"
          :disabled="!selected?.length"
          icon="deleteOutlined"
        />
      </nav>

      <ProTable
        ref="tableRef"
        :data="listData"
        :columns="columns"
        :extraBtns="2"
        :operate="{
          编辑: handleEdit,
          详情: handleDetail,
          删除: '/stationInfo/delete' || handleDelete,
        }"
        @afterOperate="handleQuery()"
      >
      </ProTable>
    </main>

    <a-modal
      centered
      v-model:visible="editModel.open"
      :title="editModel.title"
      @ok="onEdit"
    >
      <ProFrom
        :editAble="editModel.editAble"
        ref="editFormRef"
        :mapping="editFormMap"
        :model-value="editModel.row"
      >
      </ProFrom>
    </a-modal>
  </section>
</template>

<style lang="less" scoped></style>
